<html lang="en" xmlns:th="http://www.thymeleaf.org" th:with="unixstamp=${#dates.createNow().time}">
<div th:replace="themes/default/header-nonebg::headerNoneBg(null,${keywords})"></div>
<link rel="stylesheet" th:href="@{/user/bootstrap/css/bootstrap.min.css}">
<link rel="stylesheet" th:href="@{/user/editormd/css/editormd.css}"/>
<style>
    .dg ul, .close-button {
        display: none;
    }
</style>
<body style="background: #afafaf;">
<div class="main-content index-page clearfix">
    <main role="main" class="container mt-3 p-3 bg-white rounded">
        <div class="row">
            <div class="col-md-12 blog-main">
                <div class="col-md-12 order-md-1">
                    <h4 class="mb-3">发布问题</h4>

                    <form class="needs-validation">
                        <!-- 隐藏域 -->
                        <input type="hidden" id="authorId" name="authorId" th:value="${session.loginUser.getUid()}">
                        <input type="hidden" id="authorName" name="authorName"
                               th:value="${session.loginUser.getUsername()}">
                        <input type="hidden" id="authorAvatar" name="authorAvatar"
                               th:value="${session.loginUser.getAvatar()}">

                        <div class="row">
                            <div class="col-md-10 mb-3">
                                <label for="title">问题标题</label>
                                <input type="text" name="title" class="form-control" id="title" value="">
                            </div>

                            <div class="col-md-2 mb-3">
                                <label for="categoryId">标签</label>
                                <select name="categoryId" class="custom-select d-block w-100" id="categoryId">
                                    <option th:each="category:${categoryList}"
                                            th:value="${category.getId()}" th:text="${category.getCategory()}">
                                    </option>
                                </select>
                            </div>

                            <div class="col-md-12 mb-3">
                                <p>问题详情</p>
                                <div id="blog-content">
                                <textarea name="content" id="content" style="display:none;" rows="3"
                                          class="form-control"> </textarea>
                                </div>
                            </div>
                        </div>
                        <a id="btn-publish-question" href="javascript:(0)" class="btn btn-primary btn-lg btn-block">发布问题
                        </a>
                    </form>
                </div>
            </div>
        </div>
    </main>
</div>
</body>
<script th:src="@{/user/bootstrap/js/bootstrap.bundle.min.js}"></script>
<script th:src="@{/user/editormd/editormd.js}"></script>
<script th:src="@{https://www.layuicdn.com/layui-v2.5.4/layui.all.js}"></script>
<script>
    $('#btn-publish-question').click(function () {
        var title = $('#title').val();
        var content = $('#content').val();
        var categoryId = $('#categoryId').val();
        var authorId = $('#authorId').val();
        var authorName = $('#authorName').val();
        var authorAvatar = $('#authorAvatar').val();
        if (title == '') {
            layer.tips('请输入问题标题', '#title', {
                tips: 3
            });
            return;
        }
        if (content.trim() == '') {
            layer.msg('请输入问题内容。。', {icon: 5});
            return;
        }
        $.ajax({
            type: "post",
            url: '/question/write',
            data: {
                title: title,
                content: content,
                categoryId: categoryId,
                authorId: authorId,
                authorName: authorName,
                authorAvatar: authorAvatar
            },
            async: true, // 异步请求
            cache: false, // 设置为 false 将不缓存此页面
            dataType: 'json', // 返回对象
            success: function (data) {
                debugger;
                if (data.code == 0) {
                    layer.msg(data.msg, {icon: 1});
                    setTimeout(toquestion, 3 * 1000);
                }
            },
            error: function (error) {
                layer.msg(error, {icon: 5});
            }
        });
    });
    function toquestion() {
        window.location.href = "/question/1";
    }
</script>

<script type="text/javascript">
    var testEditor;
    $(function () {
        testEditor = editormd("blog-content", {
            width: "100%",
            height: 600,
            syncScrolling: "single",
            path: "/user/editormd/lib/",
            saveHTMLToTextarea: true,    // 保存 HTML 到 Textarea
            // [TOCM]  [TOC] 自动生成目录
            tocm: true,
            tocContainer: "",
            tocDropdown: false,
            tocStartLevel: 1,     // Parse beginning of H2, Default value 1
            emoji: true,
            tex: true,                   // 开启科学公式TeX语言支持，默认关闭
            flowChart: true,             // 开启流程图支持，默认关闭
            sequenceDiagram: true,       // 开启时序/序列图支持，默认关闭,
            //图片上传
            imageUpload: true,
            imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            imageUploadURL: "/question/upload_qiniu",
            onload: function () {
                console.log('onload', this);
            },
            /*指定需要显示的功能按钮*/
            toolbarIcons: function () {
                return ["undo", "redo", "|",
                    "bold", "del", "italic", "quote", "ucwords", "uppercase", "lowercase", "|",
                    "list-ul", "list-ol", "hr", "|",
                    "link", "reference-link", "image",
                    "code-block", "table", "datetime", "emoji", "html-entities", "|",
                    "search", "watch", "preview", "fullscreen"]
            },
            onfullscreen: function () {
                console.log("onfullscreen");
                document.getElementsByClassName("header")[0].style.display = "none";
                document.getElementsByClassName("footer")[0].style.display = "none";
            },
            onfullscreenExit: function () {
                console.log("onfullscreenExit");
                document.getElementsByClassName("header")[0].style.display = "";
                document.getElementsByClassName("footer")[0].style.display = "";
            }
        });
    });
</script>
</html>